<template>
	<aside class="menu-aside">
		<!--导航菜单-->
		<el-menu
			:default-active="$route.meta.menuPath || $route.path"
			background-color="#373d41"
			text-color="#fff"
			active-text-color="#409eff"
			unique-opened
			router
			v-show="!collapsed"
		>
			<template v-for="(item, index) in menus">
				<el-submenu v-if="item.children && item.children.length>0" :index="index + ''" :key="index">
					<template slot="title">
						<i :class="item.iconCls"></i>
						<span>{{item.text}}</span>
					</template>
					<el-menu-item v-for="child in item.children" :key="child.modulepath" :index="child.modulepath === '/' ? '' : child.modulepath" >{{child.text}}</el-menu-item>
				</el-submenu>
				<el-menu-item v-else :index="item.modulepath">
					<i :class="item.iconCls"></i>
					<span slot="title">{{item.text}}</span>
				</el-menu-item>
			</template>
		</el-menu>
		<div class="copy-right">
			{{collapsed?"":"最福利提供"}}
		</div>
		<!--导航菜单-折叠后-->
		<ul class="el-menu el-menu-vertical-demo el-menu--darkcollapsed custom-menu" v-show="collapsed" ref="menuCollapsed">
			<li v-for="(item, index) in menus" class="el-submenu item" :key="index">
				<template>
					<div class="el-submenu__title"
						 style="padding-left: 10px;height: 50px; line-height: 40px;"
						 @mouseover="showMenu(index,true)"
						 @mouseout="showMenu(index,false)"
					>
						<i :class="item.iconCls"></i>
					</div>
					<ul class="el-menu submenu" :class="'submenu-hook-'+index" @mouseover="showMenu(index,true)" @mouseout="showMenu(index,false)">
						<li v-for="child in item.children"
							:key="child.modulepath"
							class="el-menu-item"
							style="padding-left: 40px;"
							:class="($route.meta.menuPath === child.modulepath || $route.path === child.modulepath) ? 'is-active':''"
							@click="$router.push(child.modulepath)">
							{{child.text}}
						</li>
						<li v-if="!item.children || (item.children && item.children.length<=0)"
							class="el-menu-item"
							style="padding-left: 40px;"
							:class="($route.meta.menuPath === item.modulepath || $route.path === item.modulepath) ? 'is-active':''"
							@click="$router.push(item.modulepath)">
							{{item.text}}
						</li>
					</ul>
				</template>
			</li>
		</ul>
	</aside>
</template>
<script>
	export default {
		props: ["collapsed", "menus"],
		data() {
			return {

			}
		},
		methods: {
			showMenu(i, status){
				this.$refs.menuCollapsed.getElementsByClassName('submenu-hook-' + i)[0].style.display = status ? 'block' : 'none';
			}
		}
	}
</script>
<style lang="scss">
	$sidebarBgColor: #373d41;
	.custom-menu {
		&.el-menu {
			background-color: $sidebarBgColor
		}
		.el-submenu:hover .el-submenu__title {
			background-color: rgb(44, 49, 52);
			color: white;
		}
		.submenu {
			.el-menu-item {
				&:hover {
					background-color: rgb(44, 49, 52);
				}
				color: white;
			}
			.el-menu-item.is-active{
				color: #409eff;
			}
			display: none;
			position: absolute;
    		margin-top: -50px;
			left: 39px;
			height: auto!important;
			background-color: $sidebarBgColor;
		}
	}
</style>
